<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
          border:1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="200" height="50" id="canvas">
    您的浏览器不支持canvas，请更新！
</canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    yanzhengma();
    function yanzhengma(){
        var n=5;//验证码字符个数
        var x=0;//字符初始位置
        //初始化背景色
        canvas.style.background=radomColor();
        //生成字符集
        var tar=creatTxt(n)
        var strW=0;
        for(var i=0;i<n;i++){
            strW=strW+ctx.measureText(tar[i]).width;
        }
        //绘制文字
        addYan(tar);
        //添加颜色点
        addCpoint(100);
        //添加干扰线
        addLine(10);
        function addYan(tar) {
            var m=(canvas.width-strW)/(n+1);
            x=m;
            for(var i=0;i<tar.length;i++){
                drawYan(i,x,6);
                x+=m;
            }
        }
        function creatTxt(n) {
            var data=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
            var newdata=[];
            for(var i=0;i<n;i++){
                newdata.push(data[parseInt(Math.random()*61)]);
            }
            return newdata;
        }
        function addLine(n){
            for(var i=0;i<n;i++){
                drawLine(Math.random()*canvas.width ,Math.random()*canvas.height,Math.random()*canvas.width,Math.random()*canvas.height);
            }
        }
        function addCpoint(n) {
            for(var i=0;i<n;i++){
                drawCpoint(Math.random()*canvas.width,Math.random()*canvas.height,Math.random()*1+1);
            }
        }
        function drawCpoint(x1,y1,r){
            ctx.beginPath();
            ctx.fillStyle=radomColor();
            ctx.arc(x1,y1,r,0,Math.PI*2);
            ctx.fill();
        }
        function drawLine(x1,y1,x2,y2){
            ctx.beginPath();
            ctx.strokeStyle=radomColor();
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.stroke();
        }
        function drawYan(i,x,y){
            ctx.textBaseline="top";
            ctx.save();
            var fontSize=30;//字体大小随机16~46
            ctx.fillStyle=radomShenColor();
            ctx.font=fontSize+"px sans-serif";
            var deg=Math.random()*10-10;
            ctx.rotate(deg*Math.PI/180);
            ctx.fillText(tar[i],x,y )
            ctx.restore();
        }
        function radomColor(){
            var r=parseInt(Math.random()*150+100);
            var g=parseInt(Math.random()*150+100);
            var b=parseInt(Math.random()*150+100);
            return "rgb("+r+","+g+","+b+")"
        }
        function radomShenColor(){
            var r=parseInt(Math.random()*50);
            var g=parseInt(Math.random()*50);
            var b=parseInt(Math.random()*50);
            return "rgb("+r+","+g+","+b+")"
        }
    }
</script>
</html>